@font-face {
    font-family: 'HeadlinerNo45';
    src: url('../fonts/headlinerno45.otf') format('opentype');
}

@font-face {
    font-family: 'ForbiddenStars';
    src: url('../fonts/forbiddenstars.ttf') format('truetype');
}

@font-face {
    font-family: 'FrizQuadrataStd';
    src: url('../fonts/frizquadratastd.otf') format('opentype');
}




body {
    top: 0;
    display: flex;
    flex-direction: column;
    font-family: 'HeadlinerNo45';
    width: 100%;
    gap: 5px;
    width: 1420px;
}

.spinner {
    display: none;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#expansion-tabs {
    font-size: 30px;
    width: 100%;
}

#faction-tabs {
    font-size: 28px;
    width: 100%;
}

#cards-tabs {
    font-size: 26px;
    width: 100%;
}

.expansion-header,
.faction-header,
.card-header {
    display: inline-block;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #bbb;
    z-index: 1000;
    cursor: grab;
}

.expansion-header.active,
.faction-header.active {
    background-color: #fff;
    box-shadow: 0 0 30px #f80;
    cursor: default;
}

.card-header.active {
    background-color: #111;
    box-shadow: 0 0 10px #090;
    color: #fff;
    cursor: default;
}

.card-container {
    display: none;
}

.card-container.active {
    display: block;
}

.grid {
    display: grid;
    gap: 20px 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px;
}

.grid.events {
    grid-template-columns: repeat(4, 1fr);
    background-color: rgb(163, 163, 163);
    gap: 5px 5px;
    width: 1835px;
}

.grid.cardBack {
    grid-template-columns: repeat(3, 1fr);
    background-color: rgb(163, 163, 163);
    gap: 5px 5px;
}



.grid.factionCard {
    width: 1835px;
}

.grid.orders {
    background-color: #aaa;
}

.grid.combat.s-section {
    background-color: #090;
}

.grid.combat.t1-section {
    background-color: #990;
}

.grid.combat.t2-section {
    background-color: #950;
}

.grid.combat.t3-section {
    background-color: #900;
}

.faction-header.active[data-faction="space_marines"] {
    background-color: #66f;
    box-shadow: 0 0 5px #66f;
}

.faction-header.active[data-faction="chaos"] {
    background-color: #e11;
    box-shadow: 0 0 5px #f55;
}

.faction-header.active[data-faction="ork"] {
    background-color: #2f3;
    box-shadow: 0 0 5px #2f4;
}

.faction-header.active[data-faction="eldar"] {
    background-color: #ff1;
    box-shadow: 0 0 5px #ff1;
}

.faction-header.active[data-faction="ig"] {
    background-color: #999;
    color: #050;
    box-shadow: 0 0 5px #ccc;
}

.faction-header.active[data-faction="tyranid"] {
    background-color: #b3f;
    box-shadow: 0 0 5px #c4f;
}

.faction-header.active[data-faction="necron"] {
    background-color: #000;
    color: #2f1;
    box-shadow: 0 0 5px #2f1;
}

.faction-header.active[data-faction="tau"] {
    background-color: #fa1;
    box-shadow: 0 0 5px #fa1;
}

.faction-header.active[data-faction="adeptus_mechanicus"] {
    background-color: #a52;
    box-shadow: 0 0 5px #a52;
}

.faction-header.active[data-faction="adepta_sororitas"] {
    background-color: #fff;
    box-shadow: 0 0 5px #fff;
}

.faction-header.active[data-faction="dark_eldar"] {
    background-color: #1ed;
    box-shadow: 0 0 5px #1ed;
}

.faction-header.active[data-faction="inquisition"] {
    background-color: #80f;
    box-shadow: 0 0 5px #80f;
    color: #fff
}

.faction-header.active[data-faction="worldeaters"] {
    background-color: #f33;
    box-shadow: 0 0 5px #f55;
}

.faction-header.active[data-faction="thousandsons"] {
    background-color: #22f;
    color: #cc2;
    box-shadow: 0 0 5px #22f;
}

.faction-header.active[data-faction="emperorschildren"] {
    background-color: #d2a;
    box-shadow: 0 0 5px #d2a;
}

.faction-header.active[data-faction="deathguard"] {
    background-color: #351;
    color: #aa0;
    box-shadow: 0 0 5px #351;
}